<template>
  <div class="surface-plot-upload-box">
    <el-upload
      ref="upload"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :show-file-list="false"
      :limit="1"
      :data="form"
      :action="upload_qiniu_url"
    >
      <div class="upload-btn">
        <span>{{ btnName }}</span>
        <img :src="iconUpload" alt="">
      </div>
    </el-upload>
    <div class="preview-box">
      <span v-if="!cover">预览图</span>
      <img v-if="cover" :src="cover" alt="">
      <div v-if="cover" class="close-btn" @click="deleteImage"><i class="el-icon-close" /></div>
      <el-progress v-if="progressShow" :width="20" :percentage="percentage" :stroke-width="3" :show-text="false" class="percent" type="circle" />
    </div>
    <!-- <img src="http://img.retailing.cccwei.com/2020/7/6/29b259d42718a6a6"> -->
  </div>
</template>
<script>
const {
  UPLOAD_QINIU_URL,
  BUCKET_QINIU_HOST
} = process.env;

import { getUpToken } from '@/api/qiniu';
import iconUpload from '@/assets/icon-upload-blue.png';
export default {
  name: 'SurfacePlotUpload',
  props: {
    cover: {
      type: String,
      default: ''
    },
    btnName: {
      type: String,
      default: '上传封面图'
    }
  },
  data() {
    return {
      upload_qiniu_url: UPLOAD_QINIU_URL,
      bucket_qiniu_host: BUCKET_QINIU_HOST,
      iconUpload,
      percentage: 0,
      progressShow: false,
      coverImage: '',
      form: {
        token: ''
      }
    };
  },
  methods: {
    async getQiniuToken() {
      const res = await getUpToken();
      if (res.code === 200) {
        return res.data.token;
      } else {
        return false;
      }
    },
    async beforeUpload(file) {
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      //   return false;
      // }
      try {
        var token = '';
        if (this.form.token === '') {
          token = await this.getQiniuToken();
        } else {
          token = this.form.token;
        }
        if (token) {
          this.form.token = token;
        }
      } catch (error) {
        this.$message.error('上传失败');
        return error;
      }
    },
    handleUploadSuccess(data) {
      const url = `${this.bucket_qiniu_host}/${data.key}`;
      this.imageCover = url;
      // this.$emit('success', url);
      this.$emit('update:cover', url);
      this.$refs['upload'].clearFiles();
    },
    handleUploadRemove() {

    },
    uploadProcess(event, file) {
      this.percentage = Number(file.percentage.toFixed(0));
    },
    handleChange(file, fileList) {
      if (file.status === 'ready') {
        this.percentage = 0;
        this.progressShow = true;
        const interval = setInterval(() => {
          if (this.percentage >= 99) {
            clearInterval(interval);
            return;
          }
          this.percentage += 1;
        }, 20);
      }
      if (file.status === 'success') {
        this.percentage = 100;
        this.progressShow = false;
      }
      if (file.status === 'fail') {
        this.progressShow = false;
      }
    },
    deleteImage() {
      // this.coverImage = '';
      this.percentage = 0;
      // this.$emit('remove', '');
      this.$emit('update:cover', '');
      this.$refs['upload'].clearFiles();
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 240px;
  font-size: 14px;
  color: #406EFF;
  line-height: 32px;
  border: 1px dashed #DDDDDD;
  border-radius: 4px;
  img {
    margin-left: 4px;
    width: 16px;
    height: 16px;
  }
}
.surface-plot-upload-box {
  // display: flex;
  // align-items: center;
  .preview-box {
    position: relative;
    width: 64px;
    height: 64px !important;
    margin-top: 10px;
    background: #FAFAFC;
    overflow: hidden;
    height: 32px;
    line-height: 64px;
    text-align: center;
    border: 1px dashed #DDDDDD;
    border-radius: 4px;
    font-size: 12px;
    color: #999999;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    .percent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .close-btn {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 0;
      width: 15px;
      height: 15px;
      line-height: 15px;
      background: rgba(0, 0, 0, 0.5);
      border-bottom-left-radius: 4px;
      color: #fff;
    }
  }
}
</style>
